<template>
	<view class="container">
		<view class="history">
			<view
				class="history-item"
				v-for="(item, index) in historyList"
				:key="index"
			>
				<view class="info">
					<text class="info-score">{{ item.userScore }}</text>
					<text class="info-name">{{ item.name }}</text>
				</view>
				<button
					v-if="showWrongBtn(item)"
					class="btn danger plain"
					@tap="goWrongDetail(item.id)"
				>
					错题集
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getHistoryExamPaperList } from '@/net/lilunceyan.js'

onLoad(params => {
	getHistoryList(params.id)
})

const historyList = ref([])
const getHistoryList = async id => {
	const { data } = await getHistoryExamPaperList({ examPaperId: id })
	historyList.value = data
}

const showWrongBtn = item => {
	const { score, userScore } = item
	return Number(score) !== Number(userScore)
}

const goWrongDetail = id => {
	uni.navigateTo({ url: `./wrongSet?id=${id}` })
}
</script>

<style lang="scss">
@import '/static/common.scss';

page {
	height: 100%;
	background-color: #fff;
}

.history {
	padding: 40rpx 24rpx;
	&-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 40rpx;
		border-radius: 8rpx;
		background: #e7f2ff;
		& + .history-item {
			margin-top: 20rpx;
		}
		.info {
			font-size: 30rpx;
			display: flex;
			overflow: hidden;
		}
		.info-score {
			color: #3b95ff;
			font-weight: bold;
		}
		.info-name {
			margin: 0 40rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			color: #364a71;
		}
	}
}
</style>
